import React from 'react';
function objchangestring(obj){
	var arr=[];
	for(var i in obj){
		arr.push(i+'='+obj[i]);
	}
	return arr.join('&');
}
var $ = (function(){
    var ajax=function(url,callback,obj){
         var xhr=new XMLHttpRequest();
         xhr.open("POST",url,true);
         if(obj){
            var Obj=objchangestring(obj);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
         xhr.send(Obj); 
         }else{
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send('');   
         }
         xhr.onreadystatechange=function(){
           if(xhr.readyState==4&&xhr.status==200){
                 callback(JSON.parse(xhr.responseText));
           }
         }
    }
    return {
      http:ajax    
     }

 })();
export default class detail extends React.Component{
    constructor(props) {
        super(props);


        this.props={
            src:{
                url:'http://10.31.153.45/latiao/list'
            }
        }

        
    this.state={
        data:{
            data:[1]
        }
   }
}
getdata(a){
    var arr=[];
    var that=this;
    $.http('http://10.31.153.45:3000/latiao/list',function(data){
         arr.push(data.docs)
        that.setState({
            data: Object.assign({}, that.state.data, {data:arr}),
        })   
},a);
}
    componentWillMount(){
        console.log("this is will mount");
        this.getdata({page:this.props.match.params.page})
        }
    render(){
        var list=[];
        var style={
            color:{
                color:"red"
            },
            height:"500px"
        }
        for(var i=0;i<this.state.data.data[0].length;i++){
            //console.log(this.state.data.data[0][i]._id)
            console.log(this.props.match.params.id)
            console.log(this.props.match.params.page)
        if(this.state.data.data[0][i]._id===this.props.match.params.id){
                list.push(
                    <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="thumbnail">
                        <img src={this.state.data.data[0][i].src} alt={this.state.data.data[0][i].name} style={style}/>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <h3 class="text-center">{this.state.data.data[0][i].detail}</h3>
                    <p class="text-center" style={style.color}>精品</p>
                    <br/>
                    <br/>
                    <br/>
                    <p class="text-center">价格：{this.state.data.data[0][i].price}</p>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <p class="text-center"><a href="#" class="btn btn-primary" role="button">加入购物车</a></p>
                    
                    </div>
                    </div>
                )
            
        }
    }
        return(
            <div>
                {list}
            </div>
        )
    }
}